<html>
    <head>
        <title> jQuery Mask Test </title>
        <script src="../jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery.maskedinput.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $.mask.definitions['~'] = "[+-]";
                $("#date").mask("99/99/9999", {completed: function() {
                        alert("completed!");
                    }});
                $("#phone").mask("(999) 999-9999");
                $("#phoneExt").mask("(999) 999-9999? x99999");
                $("#iphone").mask("+33 999 999 999");
                $("#tin").mask("99-9999999");
                $("#ssn").mask("999-99-9999");
                $("#product").mask("a*-999-a999", {placeholder: " "});
                $("#eyescript").mask("~9.99 ~9.99 999");
                $("#po").mask("PO: aaa-999-***");
                $("#pct").mask("99%");
                $("#cpf").mask("999.999.999-99");
                $("input").blur(function() {
                    $("#info").html("Unmasked value: " + $(this).mask());
                }).dblclick(function() {
                    $(this).unmask();
                });
            });

        </script>
    </head>
    <body>
        <table>
            <tr><td>Date</td><td><input id="date" value="1231" type="text" tabindex="1" /></td><td>99/99/9999</td></tr>
            <tr><td>Phone</td><td><input id="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
            <tr><td>CPF</td><td><input id="cpf" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
            <tr><td>Phone + Ext</td><td><input id="phoneExt" type="text" tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
            <tr><td>Int'l Phone</td><td><input id="iphone" type="text" tabindex="2"/></td><td>+33 999 999 999</td></tr>
            <tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
            <tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
            <tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
            <tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
            <tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
            <tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
        </table>
        <div id="info"></div>
    </body>
</html>